import React from "react";
import { Form, Input, Button, message as antdMessage } from "antd";
import axios from "axios";
import { NavLink, useNavigate } from "react-router-dom";

const Register = () => {
  const navigate = useNavigate()
  const onFinish = async (values) => {
    const resp = await axios.post('/api/register', values);
    const { code, message } = resp.data;
    if(code === 10000) {
      antdMessage.success(message);
      navigate('/login')
    } else {
      antdMessage.error(message)
      
    }
  }
  return (
    <div>
      <div style={{ 
        width: 400,
        margin: '200px auto',
        border: "1px solid #ccc",
        padding: 20,
        borderRadius: 10
       }}>
        <h2 style={{ textAlign: 'center' }}>用户注册</h2>
        <Form 
          onFinish={onFinish}
        >
          <Form.Item name="username" label="账户">
            <Input placeholder="请输入账号"></Input>
          </Form.Item>
          <Form.Item name="password" label="密码">
            <Input.Password placeholder="请输入密码"></Input.Password>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">注册</Button>
          </Form.Item>
        </Form>
        <h5>
          <NavLink to="/login">已有账号， 去登录吧</NavLink>
        </h5>
      </div>
    </div>
  );
};

export default Register;
